import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { Button, Icon, Input } from 'antd';
import { WeaInput, WeaLocaleProvider } from 'ecCom';
import { WeaTableNew } from 'comsMobx';
import getFileIcon from '../../util/fileType';
import { nameRule_compatible } from '../../util/namingRules';
import { openWindow } from '../../util/index';

const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

/*
* 合规、重名验证：
*  1.修改、新建：与IconView一样的逻辑即可
*  2.复制、移动：调store中的函数
* */

@inject('netDiskStore')
@observer
class Table extends React.Component {
   componentDidMount() {
      const { fileSystem: { getTableDatas } } = this.props.netDiskStore;
      getTableDatas();
   }

   getColumns = columns => columns.forEach((col) => {
      const { fileSystem } = this.props.netDiskStore;
      const { tableEdit } = toJS(fileSystem);
      switch (col.dataIndex) {
         case 'icon':
            col.render = (text, record) => {
               let icon = getFileIcon(record.type, record.textname, 'thumbnail', 'svg');
               if (record.type === 'folder') {
 return <img className="tableIcon" src={icon} alt draggable={false} />; 
} else if (record.type === 'file') {
 return <i className={`${icon.icon} tableIcon`} style={{ color: icon.color }} />; 
}
            };
            break;
         case 'textname':
            col.render = (text, record) => {
               // 判断tableEdit是否为true, record的edit是否为true
               let url = `"/rdeploy/chatproject/doc/imageFileView.jsp?fileid=${record.id}"`;
               // let url = `/rdeploy/chatproject/doc/imageFileView.jsp?fileid=53335`;
               let tag = <a href="javascript:void(0)" target="_blank" onClick={() => {
 openWindow(url); 
}}>{ text }</a>;
               tableEdit && record.editing && (tag = <EditName ecId={`${this && this.props && this.props.ecId || ''}_EditName@wmqjxj`} keys={record.id} editMode={1} />);
               return tag;
            };
            break;
         default:
            break;
      }
      return col;
   });

   operateClick = (record, index, operate, key) => {
      console.log(record, index, operate, key);
      switch (key) {
         default:
            break;
      }
   };

   render() {
      const { changeTopSelect, viewSettings, fileSystem } = this.props.netDiskStore;
      const { tableStore } = fileSystem;


      console.log(toJS(tableStore.columns));
      return (
         <div className="">
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@binrkn`}
              comsWeaTableStore={tableStore}
              pageSizeOptions={[10, 20, 50, 100]}
              getColumns={this.getColumns}
              onOperatesClick={this.operateClick}
              needScroll={true}
              hasOrder={true}
            />
         </div>
      );
   }
}

// 编辑框组件
@inject('netDiskStore')
@observer
class EditName extends React.Component {
   constructor(props) {
      super(props);
      const { fileSystem } = this.props.netDiskStore;
      const { keys } = this.props;
      let data = toJS(fileSystem.tableStore.datas).find(f => f.id === keys);
      this.initValue = data.textname;
      this.ext = data.textname.split('.').pop();
   }

   componentDidMount() {
      const { fileSystem } = this.props.netDiskStore;
      // const inputDom = this.inputRef.refs.inputNormal.refs.input.refs.input;
      const inputDom = this.inputRef.refs.input;
      inputDom.focus(); // 组件挂载时聚焦
      // todo 多语言
      fileSystem.tableInputValue === getLabel(513708, '新建目录') && inputDom.select(); // 如果是新建文件夹则选中文本
      inputDom.addEventListener('keydown', this.enterDown);
   }

   componentWillUnmount() {
      // const inputDom = this.inputRef.refs.inputNormal.refs.input.refs.input;
      const inputDom = this.inputRef.refs.input;
      inputDom.removeEventListener('keydown', this.enterDown);
   }

   // enter键提交
   enterDown = (e) => {
      const { fileSystem, rightMenu: { rightHandle_cancelRename, rightHandle_confirmRename } } = this.props.netDiskStore;
      const { keys, editMode } = this.props;

      editMode === 0 && e.keyCode === 13 && e.key.toLowerCase() === 'enter' && rightHandle_confirmRename(keys);
      if (editMode === 1 && e.keyCode === 13 && e.key.toLowerCase() === 'enter') {
         const nowValue = `${fileSystem.tableInputValue}.${this.ext}`;
         this.initValue === nowValue && rightHandle_cancelRename();
         this.initValue !== nowValue && rightHandle_confirmRename(keys);
      }
   };

   inputBlur = (val) => {
      val = val.target.value;
      const { keys } = this.props;
      const { rightMenu: { rightHandle_cancelRename, rightHandle_confirmRename } } = this.props.netDiskStore;
      const nowValue = `${val}.${this.ext}`;
      this.initValue === nowValue && rightHandle_cancelRename();
      this.initValue !== nowValue && rightHandle_confirmRename(keys);
   };


   clickHandle = (e, isSubmit) => {
      const { rightMenu: { rightHandle_confirmRename, rightHandle_cancelRename } } = this.props.netDiskStore;
      const { keys } = this.props;
      isSubmit && rightHandle_confirmRename(keys);
      !isSubmit && rightHandle_cancelRename();
   };

   onChangeHandle = (val) => {
      val = val.target.value;
      const { keys } = this.props;
      const { fileSystem: { setFileSystemData } } = this.props.netDiskStore;
      let flag = true,
fullName = '';
      // todo 合法验证
      [flag, fullName, name] = nameRule_compatible(fullName, val, 'turn');
      name = flag ? val : fileSystem.tableInputValue;
      setFileSystemData({ tableInputValue: name });
      console.log('name', name);
   };

   render() {
      const { editMode } = this.props;
      const { fileSystem } = this.props.netDiskStore;

      return (
         <div className="edit-name">
            <Input ecId={`${this && this.props && this.props.ecId || ''}_Input@r9dfr8`}
              ref={(e) => {
 this.inputRef = e; 
}}
              type="text"
              value={fileSystem.tableInputValue}
              placeholder={getLabel(506461, '文件名不能为空')}
              onChange={this.onChangeHandle}
              onBlur={editMode === 1 && this.inputBlur}
            />
            {
               editMode === 0
                  ?
               <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@lrub4u`}>
                  <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zozi8d`} className="left" type="ghost" onClick={(e) => {
 this.clickHandle(e, true); 
}}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@e3sdne`} type="check" /></Button>
                  <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5f8j1b`} className="right" type="ghost" onClick={(e) => {
 this.clickHandle(e, false); 
}}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@88yz6s`} type="cross" /></Button>
               </React.Fragment>
                  :
                  null
            }
         </div>
      );
   }
}


export default Table;
